<template>
	<view class="modal_Search">
		<view class="cu-modal bottom-modal" :class="modalSearch ? 'show' : ''" @click="hideModalSearch()">
			<view class="cu-dialog d_content" @click.stop>
				<view class="t_title">
					<view class="text-bold font-30">搜索条件</view>
					<view class="text-gray" @click="hideModalSearch()">取消</view>
				</view>
				<!-- 日期搜索 -->
				<view class="flex">
					<view class="sub_title flex-column-center" style="color: #666;">日期</view>
					<view class="flex-0 d_search">
						<date-search @getTime="getTime"></date-search>
					</view>
				</view>
				<view class="cu-bar goods-search bg-white" v-if="pageType=='hz'">
					<view class="sub_title">分销员</view>
					<view class="search-form round flex-0">
						<text class="cuIcon-search"></text>
						<input v-model="sName" type="text" placeholder="请输入分销员姓名" confirm-type="search" disabled
							@click="sInput"></input>
					</view>
				</view>
				<view class="cu-bar  goods-search bg-white">
					<view class="sub_title">姓名</view>
					<view class="search-form round flex-0">
						<text class="cuIcon-search"></text>
						<input v-model="searchParms.recName" type="text" placeholder="请输入收货人姓名"
							confirm-type="search"></input>
					</view>
				</view>
				<view class="cu-bar  goods-search bg-white">
					<view class="sub_title">电话</view>
					<view class="search-form round flex-0">
						<text class="cuIcon-search"></text>
						<input v-model="searchParms.recPhone" type="text" placeholder="请输入收货人电话"
							confirm-type="search"></input>
					</view>
				</view>
				<view class="cu-bar  goods-search bg-white">
					<view class="sub_title">单号</view>
					<view class="search-form round flex-0">
						<text class="cuIcon-search"></text>
						<input v-model="searchParms.logisticsNo" type="text" placeholder="请输入订单物流单号"
							confirm-type="search"></input>
					</view>
				</view>
				<!-- <view class="cu-bar goods-search bg-white">
					<view class="sub_title">活动</view>
					<view class="gs_list" v-if="actList&&actList.length">
						<view v-for="(item,index) in actList" :key="index" @click="actClick(item)"
							:class="item.checked? 'gActive' :''">
							{{item.activityName}}
						</view>
					</view>
					<view class="cu-load loading flex-0" v-if="actLoading"></view>
				</view> -->
				<view class="cu-bar goods-search bg-white">
					<view class="sub_title">活动</view>
					<view class="gs_list act_list" v-if="actList&&actList.length">
						<picker mode="selector" :range="actList" :value="cAct.currentAct" range-key='activityName'
							@change="actSelect" class="w-100 h-100 p-relative">
							<text>{{ cAct.currentActName || '+ 请选择活动'}}</text>
							<text v-if="cAct.currentActName" class="cuIcon-unfold"
								style="position: absolute; right: 20rpx;"></text>
						</picker>
					</view>
				</view>
				<view class="cu-bar goods-search bg-white" v-if="gList&&gList.length">
					<view class="sub_title">商品</view>
					<view class="gs_list">
						<view v-for="(item,index) in gList" :key="index" @click="gClick(item)"
							:class="item.checked? 'gActive' :''">
							{{item.name}}
						</view>
					</view>
					<view class="cu-load loading flex-0" v-if="gLoading"></view>
				</view>
				<view class="mTop-20">
					<button class="cu-btn round bg-gradual-lPink" style="width: 80%;height: 80rpx;margin: 20rpx 0;"
						@click="goSearch()">搜索</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import dateSearch from './date-search.vue'
	const util = require("utils/util.js");
	import api from 'utils/api'

	export default {
		name: 'top-search',
		data() {
			return {
				modalSearch: false,
				gList: [], // 商品选项
				actList: [], // 云仓活动
				gLoading: false,
				actLoading: false,
				searchParms: {}, // 查询条件
				sName: '', // 分销员姓名
				userInfo: uni.getStorageSync('user_info') || {},
				cAct: {}, // 当前活动
			}
		},
		components: {
			dateSearch
		},
		props: {
			pageType: {
				type: String,
				default: ''
			}
		},
		methods: {
			// 打开弹窗
			open() {
				this.modalSearch = true
				// if (this.gList && !this.gList.length) {
				// 	this.getGetYcGoods()
				// }
				if (this.actList && !this.actList.length) {
					this.getGetYcActs()
				}
			},
			// 关闭弹窗
			hideModalSearch() {
				this.modalSearch = false
			},
			// 分销员姓名搜索列表
			sInput(e) {
				uni.navigateTo({
					url: '/pages/actYc/yc-distributors?type=1'
				})
			},
			// 分销员姓名
			getsName(obj) {
				if (obj.userid) {
					this.sName = obj.userName
					this.searchParms.userid = obj.userid
					this.searchParms.leaderUserid = null
				}

			},
			// 选择时间
			getTime(data) {
				this.searchParms.startTime = data.startTime
				this.searchParms.endTime = data.endTime
			},
			// 获取商品
			getGetYcGoods(activityId) {
				this.gLoading = true
				api.ycSpuList({
					activityId
				}).then(res => {
					const data = res.data || []
					this.gList = data.map(v => {
						v.checked = false
						return v
					})
					this.gLoading = false
				})
			},
			// 获取云仓活动
			getGetYcActs() {
				this.actLoading = true
				api.ycMyActivity({
					userId: this.userInfo.userEmpId,
				}).then(res => {
					const data = res.data || []
					this.actList = data.map(v => {
						v.checked = false
						return v
					})
					this.actLoading = false
				})
			},
			// 选择商品
			gClick(item) {
				this.gList.forEach(v => {
					if (v.id == item.id) {
						v.checked = !v.checked
					}
				})
			},
			// 选择活动
			actSelect(e) {
				let index = e.detail.value
				this.cAct = {
					currentActName: this.actList[index].activityName,
					cActivityId: this.actList[index].id,
					currentAct: index
				}
				this.getGetYcGoods(this.cAct.cActivityId)
			},
			// 搜索
			goSearch() {
				if (this.searchParms.startTime && !this.searchParms.endTime) {
					util.uShowModal('结束时间不能为空')
					return
				}
				if (this.searchParms.endTime && !this.searchParms.startTime) {
					util.uShowModal('开始时间不能为空')
					return
				}
				// 商品 / 活动 
				if (this.cAct.cActivityId) {					
					let spuIds = []
					this.gList.forEach(v => {
						if (v.checked) {
							spuIds.push(v.id)
						}
					})
					if(spuIds&&spuIds.length) {
						this.searchParms.spuIds = spuIds
						this.searchParms.activityId = null
					} else {
						this.searchParms.activityId = this.cAct.cActivityId
						this.searchParms.spuIds = []
					}
				}		
				this.$emit('searchClick', this.searchParms)
				this.modalSearch = false
			}
		}
	}
</script>

<style scoped>
	.modal_Search .d_content {
		padding: 0 20rpx 30rpx;
		background-color: #fff;
		max-height: 80vh;
		overflow-y: auto;
	}

	.modal_Search .d_content .t_title {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 100rpx;
	}

	.modal_Search .d_content .sub_title {
		width: 100rpx;
	}

	.modal_Search .d_content .d_search {
		border: 1rpx solid #e6e6e6;
		border-radius: 10rpx;
	}

	.modal_Search .d_content .search-form {
		margin: 0;
	}

	.modal_Search .d_content .gs_list {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		flex: 1;
		width: 0;
	}

	.modal_Search .d_content .gs_list>view {
		border-radius: 10rpx;
		background-color: #f9f9f9;
		border: 1rpx solid #e6e6e6;
		width: 100%;
		height: 64rpx;
		line-height: 64rpx;
		margin: 10rpx 0rpx 0rpx 0;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
	}

	.modal_Search .d_content .gs_list .gActive {
		background-color: #FE7193;
		color: #fff;
	}

	.act_list {
		border: 1rpx solid #ccc;
		text-align: center;
		height: 70rpx;
		line-height: 70rpx;
		border-radius: 15rpx;
	}
</style>